<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<style>
    #myDIV {
        height: 200px;
        background-color: lightblue;
        border: 1px solid black;
        -webkit-animation: mymove 1s infinite;
        /* Chrome, Safari, Opera */
        animation: mymove 1s infinite;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        50% {
            margin-right: 400px;
        }
    }

    /* Standard syntax */
    @keyframes mymove {
        50% {
            margin-right: 400px;
        }
    }
</style>

<body>
    <p>逐步改变 margin-right, 从 50px 到 0px :<p>
            <div id="myDIV">This is my DIV element.</div>
            <p>margin-right 属性支持动画效果。</p>
</body>

</html>